<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div :id="code" :style="'width: 100%;height: ' + height + ';'" />
  </el-card>
</template>

<script>
import theme from '@/components/ik/echarts/theme/ik.json'
import { initTimeSeries } from '@/components/ik/echarts/dataProcess'
import * as echarts from 'echarts'

export default {
  name: 'IkCalendarBaseChart',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    code: {
      type: String,
      default: 'bar.base'
    },
    gridType: {
      type: String,
      default: 'summary'
    },
    data: {
      type: Array,
      default: function() {
        return [
          { 'type': '类型6', 'time': '2020-01-23 09:07:53', 'value': '39' },
          { 'type': '类型4', 'time': '2020-01-21 16:02:38', 'value': '30' },
          { 'type': '类型4', 'time': '2020-01-22 07:04:22', 'value': '35' },
          { 'type': '类型4', 'time': '2020-01-22 12:06:15', 'value': '37' },
          { 'type': '类型1', 'time': '2020-01-21 14:09:47', 'value': '30' },
          { 'type': '类型6', 'time': '2020-01-23 04:08:39', 'value': '35' },
          { 'type': '类型6', 'time': '2020-04-22 19:02:37', 'value': '30' },
          { 'type': '类型1', 'time': '2020-04-21 08:05:27', 'value': '30' },
          { 'type': '类型1', 'time': '2020-03-21 12:07:51', 'value': '30' },
          { 'type': '类型6', 'time': '2020-03-23 09:07:53', 'value': '39' },
          { 'type': '类型4', 'time': '2020-05-21 16:02:38', 'value': '30' },
          { 'type': '类型4', 'time': '2020-02-22 07:04:22', 'value': '35' },
          { 'type': '类型4', 'time': '2020-02-22 12:06:15', 'value': '37' },
          { 'type': '类型1', 'time': '2020-01-18 14:09:47', 'value': '30' },
          { 'type': '类型6', 'time': '2020-01-09 04:08:39', 'value': '35' },
          { 'type': '类型6', 'time': '2020-05-22 19:02:37', 'value': '30' },
          { 'type': '类型1', 'time': '2020-05-27 08:05:27', 'value': '30' },
          { 'type': '类型1', 'time': '2020-05-05 12:07:51', 'value': '30' },
          { 'type': '类型7', 'time': '2020-05-01 16:00:51', 'value': '39' }
        ]
      }
    },
    // 时间维度
    timeDimensionField: {
      type: String,
      default: 'time'
    },
    timeDimensionFormat: {
      type: String,
      default: 'yyyy-MM-DD'
    },
    timeDimensionStart: {
      type: String,
      default: '2020-01-01 00:00:00'
    },
    timeDimensionStop: {
      type: String,
      default: '2020-05-31 00:00:00'
    },
    timeDimensionInterval: {
      type: String,
      default: '1'
    },
    timeDimensionUom: {
      // day - 日  不能修改
      type: String,
      default: 'day'
    },
    timeDimensionStep: {
      // 步进位置：start/stop/middle
      type: String,
      default: 'middle'
    },
    // 数据分析维度 - 第二数据维度
    dataDimensionField: {
      type: String,
      default: 'value'
    },
    dataDimensionMin: {
      type: String,
      default: '0'
    },
    dataDimensionMax: {
      type: String,
      default: '100'
    },
    // 样式
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chartAnalysisDimension: [],
      chartSeries: []
    }
  },
  mounted() {
    const $this = this
    // 初始化 chart 样式
    // 基于准备好的dom，初始化echarts实例
    const dom = document.getElementById($this.code)
    echarts.registerTheme('ik', theme)
    // 初始化组件，配合主题 - 'dark'
    const myChart = echarts.init(dom, 'ik')

    const time = {}
    // 生成 series
    const series = initTimeSeries($this.data, [], '',
      $this.timeDimensionField, $this.timeDimensionFormat, $this.timeDimensionStart, $this.timeDimensionStop, $this.timeDimensionInterval, $this.timeDimensionUom,
      $this.timeDimensionStep, $this.dataDimensionField, $this.gridType, time)

    // 生成数据轴数据
    const visualMap = {
      top: 0,
      type: 'piecewise',
      orient: 'horizontal',
      left: 'center'
    }
    if ($this.dataDimensionMin !== '') {
      visualMap['min'] = Number($this.dataDimensionMin)
    }
    if ($this.dataDimensionMax !== '') {
      visualMap['max'] = Number($this.dataDimensionMax)
    }

    const chartSeries = {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: series['数据']
    }

    // 绘制图表
    myChart.setOption({
      tooltip: {},
      visualMap: visualMap,
      calendar: {
        top: 60,
        left: 30,
        right: 30,
        range: [time.startTime, time.stopTime],
        itemStyle: {
          borderWidth: 0.5
        },
        yearLabel: {
          show: true
        },
        monthLabel: {
          show: true,
          nameMap: [
            '一月', '二月', '三月',
            '四月', '五月', '六月',
            '七月', '八月', '九月',
            '十月', '十一月', '十二月'
          ]
        },
        dayLabel: {
          show: true,
          nameMap: ['日', '一', '二', '三', '四', '五', '六']
        }
      },
      series: [
        chartSeries
      ]
    })
  },
  methods: {
    // 切换密码显示
  }
}
</script>

